﻿@model store.Areas.Admin.Models.EditProductModel

@{
    ViewBag.Title = "Sửa sản phẩm";
}
<div id="onload">
    <div id="content">
        <div class="contentTop">
            @Html.Partial("_ContentTopPartial")
        </div>

        <!-- Breadcrumbs line -->
        <div class="breadLine">
            <div class="bc">
                <ul id="breadcrumbs" class="breadcrumbs">
                    <li><a href="@Url.Action("Index", "Index")">Trang chủ</a></li>
                    <li><a href="@Url.Action("Index")">Quản lý sản phẩm</a>
                    </li>
                    <li class="current"><a href="@Url.Action("Create")" title="">Sửa thông tin sản phẩm</a></li>
                </ul>
            </div>

            <div class="breadLinks">
                <ul>
                    <li class="has">
                        <a title="">
                            <i class="icos-list"></i>
                            <span>Quản lý danh mục sản phẩm</span>
                            <span>
                                <img src="~/Content/Admin/images/elements/control/hasddArrow.png" alt="" /></span>
                        </a>
                        <ul>
                            <li><a href="@Url.Action("Index", "Category")" title=""><span class="icos-archive"></span>Danh sách</a></li>
                            <li><a href="@Url.Action("Create", "Category")" title=""><span class="icos-add"></span>Thêm mới</a></li>
                        </ul>
                    </li>
                    <li class="has">
                        <a title="">
                            <i class="icos-list"></i>
                            <span>Quản lý sản phẩm</span>
                            <span>
                                <img src="~/Content/Admin/images/elements/control/hasddArrow.png" alt="" /></span>
                        </a>
                        <ul>

                            <li><a href="@Url.Action("Index")" title=""><span class="icos-archive"></span>Danh sách</a></li>
                            <li><a href="@Url.Action("Create")" title=""><span class="icos-add"></span>Thêm mới</a></li>
                        </ul>
                    </li>
                </ul>
                <div class="clear"></div>
            </div>
        </div>

        <!-- Main content -->
        <div class="wrapper">
            <div class="fluid">

                <div class="widget">
                    <div class="whead">
                        <h6>Sửa sản phẩm</h6>
                        <div class="clear"></div>
                    </div>
                    <div id="tab-container" class="tab-container">
                        <ul class="iconsLine ic3 etabs">
                            <li><a href="#general" title="">Thông tin sản phẩm</a></li>
                            <li><a href="#options" title="">Tùy chọn khác</a></li>
                        </ul>

                        <div class="divider"><span></span></div>

                        <!--Thong tin san pham-->
                        <div id="general">
                            <div class="formRow" style="height: 110px">
                                <div class="grid3">
                                    <label>Hình ảnh:<span class="req">*</span></label>
                                </div>
                                <div class="grid9">
                                    <div id="review">
                                        @{
                                            var listsImg = Model.Picture.Split(',');
                                            for (int i = 1; i < listsImg.Length; i++)
                                            {
                                                var id = listsImg[i].Split('.')[0];
                                            <div id="@id" class="boximg">
                                                <img src='~/Files/thumb/@listsImg[i]' />
                                                <div class="delete icos-delete" title="Delete" onclick="deleteImages('@listsImg[i]')"></div>
                                            </div>
                                            }
                                        }
                                    </div>
                                    @using (Html.BeginForm("Upload", "Product", FormMethod.Post, new { enctype = "multipart/form-data", @id = "formUpload" }))
                                    {   
                                        <input id="uploadimages" type="file" name="files" multiple="multiple" onchange="submitForm()" />
                                    }

                                </div>
                                <div class="clear"></div>
                            </div>

                            @using (Html.BeginForm())
                            {
                                @Html.AntiForgeryToken()
                                @Html.ValidationSummary(true)
                                <div class="formRow">
                                    <div class="grid3">
                                        <label>Tên sản phẩm:<span class="req">*</span></label>
                                    </div>
                                    <div class="grid9">
                                        @Html.TextBoxFor(model => model.ProductName, new { @style = "width: 400px" })
                                        @Html.ValidationMessageFor(model => model.ProductName)
                                        @Html.HiddenFor(model => model.ProductID)
                                    </div>
                                    <div class="clear"></div>
                                </div>
                                <div class="formRow">
                                    <div class="grid3">
                                        <label>Mã sản phẩm:</label>
                                    </div>
                                    <div class="grid9">
                                        @Html.TextBoxFor(model => model.ProductCode, new { @style = "width: 100px" })
                                        @Html.ValidationMessageFor(model => model.ProductCode)
                                    </div>
                                    <div class="clear"></div>
                                </div>
                                <div class="formRow">
                                    <div class="grid3">
                                        <label>Giá bán:</label>
                                    </div>
                                    <div class="grid9">
                                        @Html.TextBoxFor(model => model.UnitPrice, new { @style = "width: 100px" }) @Html.Raw("VND")
                                        @Html.ValidationMessageFor(model => model.UnitPrice)
                                    </div>
                                    <div class="clear"></div>
                                </div>
                                <div class="formRow">
                                    <div class="grid3">
                                        <label>Giảm giá:</label>
                                    </div>
                                    <div class="grid9">
                                        @Html.TextBoxFor(model => model.Sales, new { @style = "width: 100px" }) @Html.Raw("%")
                                        @Html.ValidationMessageFor(model => model.Sales)
                                    </div>
                                    <div class="clear"></div>
                                </div>
                                <div class="formRow">
                                    <div class="grid3">
                                        <label>Danh mục:<span class="req">*</span></label>
                                    </div>
                                    <div class="grid9">
                                        @Html.DropDownListFor(model => model.CategoryID, (SelectList)ViewBag.Categorys, new { @style = "width: 100%", @size = "10" })
                                        @Html.ValidationMessageFor(model => model.CategoryID)
                                    </div>
                                    <div class="clear"></div>
                                </div>
                                <div class="formRow">
                                    <div class="grid3">
                                        <label>Mô tả ngắn gọn:</label>
                                    </div>
                                    <div class="grid9">
                                        @Html.TextAreaFor(model => model.ShortDesciption, new { @rows = "8" })
                                        @Html.ValidationMessageFor(model => model.ShortDesciption)
                                    </div>
                                    <div class="clear"></div>
                                </div>
                                <div class="formRow">
                                    <div class="grid3">
                                        <label>Mô tả chi tiết:</label>
                                    </div>
                                    <div class="grid9">
                                        @Html.TextAreaFor(model => model.DetailDescription, new { @rows = "8", @id = "editor" })
                                        @Html.ValidationMessageFor(model => model.DetailDescription)
                                    </div>
                                    <div class="clear"></div>
                                </div>
                                <div class="formRow">
                                    <div class="grid3">
                                        <label>Hiển thị:</label>
                                    </div>
                                    <div class="grid9 check">
                                        @Html.CheckBoxFor(model => model.Active)
                                        @Html.ValidationMessageFor(model => model.Active)
                                    </div>
                                    <div class="clear"></div>
                                </div>
                                <div class="formRow">
                                    <table class="fr">
                                        <tr>
                                            <td>
                                                <input type="submit" name="OptionSubmit" value="Lưu" class="buttonM bBlue formSubmit" /></td>
                                            <td>
                                                <input type="submit" name="OptionSubmit" value="Lưu và Thêm mới" class="buttonM bBlue formSubmit" /></td>
                                            <td>
                                                <input type="reset" value="Làm lại" class="buttonM bDefault formSubmit" /></td>
                                            <td>
                                                <input type="button" onclick="javascript: history.go(-1);" value="Quay lại" class="buttonM bDefault formSubmit" /></td>
                                        </tr>
                                    </table>

                                    <div class="clear"></div>
                                </div>
                                <div class="clear">
                                </div>

                            }
                        </div>
                        <!--Hinh anh san pham-->
                        <div id="options">
                            @* <div class="widget">
                                    <div class="whead">
                                        <h6>Album ảnh sản phẩm</h6>
                                        <div class="clear"></div>
                                    </div>

                                    <div id="uploader">You browser doesn't have HTML 4 support.</div>
                                </div>*@

                        </div>

                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
@section styles
{
    @Styles.Render("~/Content/Admin/css/elrte.min.css")
}
@section scripts
{
    @Scripts.Render("~/bundles/jquerytable")
    @*@Scripts.Render("~/bundles/jqueryval")*@
    @Scripts.Render("~/Scripts/jquery.validate.min.js")
    @Scripts.Render("~/Scripts/jquery.validate.unobtrusive.min.js")
    @Scripts.Render("~/Scripts/jquery.unobtrusive-ajax.min.js")
    @Scripts.Render("~/bundles/form")
    @*@Scripts.Render("/Content/Admin/js/plugins/uploader/jquery.plupload.js")*@
    @*@Scripts.Render("~/bundles/jqueryplupload")*@
    @Scripts.Render("~/bundles/ui")
    @Scripts.Render("~/Content/Admin/js/plugins/ui/jquery.easytabs.min.js")
    @Scripts.Render("~/Content/Admin/js/plugins/forms/jquery.elrte.min.js")
    @Scripts.Render("~/Content/Admin/js/plugins/others/jquery.elfinder.js")

    @Scripts.Render("~/Content/Admin/js/files/bootstrap.js")
    @Scripts.Render("~/Content/Admin/js/files/functions.js")


}
<script type="text/javascript" charset="utf-8">
    function deleteImages(img) {
        $.ajax({
            type: "POST",
            url: "../DeleteImages",
            data: "img=" + img,
            dataType: "text", //change to your own, else read my note above on enabling the JsonValueProviderFactory in MVC
            success: function (data) {
                var id = data.split('.');
                $("#" + id).remove();
                $("#uploadimages").val('');
            },
            error: function (jqXHR, textStatus, errorThrown) {
                //do your own thing
                alert(errorThrown);
            }
        });
    }
    function submitForm() {
        $("#formUpload").submit();
    }
    $().ready(function () {

        //===== Easy tabs =====//

        $('#tab-container').easytabs({
            animationSpeed: 100,
            collapsible: false,
            tabActiveClass: "clicked"
        });


        //===== Tabs =====//

        $.fn.contentTabs = function () {

            $(this).find(".tab_content").hide(); //Hide all content
            $(this).find("ul.tabs li:first").addClass("activeTab").show(); //Activate first tab
            $(this).find(".tab_content:first").show(); //Show first tab content

            $("ul.tabs li").click(function () {
                $(this).parent().parent().find("ul.tabs li").removeClass("activeTab"); //Remove any "active" class
                $(this).addClass("activeTab"); //Add "active" class to selected tab
                $(this).parent().parent().find(".tab_content").hide(); //Hide all tab content
                var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
                $(activeTab).show(); //Fade in the active content
                return false;
            });

        };
        $("div[class^='widget']").contentTabs(); //Run function on any div with class name of "Content Tabs"

        var opts = {
            cssClass: 'el-rte',
            // lang     : 'ru',
            height: 200,
            toolbar: 'complete',
            fmOpen: function (callback) {
                $('<div/>').dialogelfinder({
                    url: '@Url.Action("Index", "Files")', // connector URL (REQUIRED)
                    // lang: 'ru', // elFinder language (OPTIONAL)
                    commandsOptions: {
                        getfile: {
                            oncomplete: 'destroy' // destroy elFinder after file selection
                        }
                    },
                    uiOptions: {
                        toolbar: [
                            ['back', 'forward'],
                            ['reload'],
                            ['home', 'up'],
                            ['mkdir', 'mkfile', 'upload'],
                            ['open', 'download'],
                            ['info'],
                            ['quicklook'],
                            ['copy', 'cut', 'paste'],
                            ['rm'],
                            ['duplicate', 'rename', 'edit', 'resize'],
                            ['view', 'sort']
                        ]
                    },
                    getFileCallback: callback // pass callback to editor
                });
            }
        };
        $('#editor').elrte(opts);

        $("#formUpload").submit(function (event) {
            var dataString;
            event.preventDefault();
            var action = $("#formUpload").attr("action");
            if ($("#formUpload").attr("enctype") == "multipart/form-data") {
                //this only works in some browsers.
                //purpose? to submit files over ajax. because screw iframes.
                //also, we need to call .get(0) on the jQuery element to turn it into a regular DOM element so that FormData can use it.
                dataString = new FormData($("#formUpload").get(0));
            } else {
                // regular form, do your own thing if you need it
            }
            $.ajax({
                type: "POST",
                url: action,
                data: dataString,
                dataType: "json", //change to your own, else read my note above on enabling the JsonValueProviderFactory in MVC
                contentType: false,
                processData: false,
                beforeSend: function () {

                },
                success: function (data) {
                    //BTW, data is one of the worst names you can make for a variable
                    for (var i = 0; i < data.length; i++) {
                        var id = data[i].split('.');
                        $("#review").append("<div id=\"" + id[0] + "\" class=\"boximg\"><img src=\"../../../Files/thumb/" + data[i] + "\"/><div class=\"delete icos-delete\" title=\"Delete\"  onclick=\"deleteImages('" + data[i] + "')\"></div></div>");
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    //do your own thing
                    alert(errorThrown);
                }
            });
        }); //end .submit()     

    })
</script>
